<!-- 
  租赁中：黄色；
  借出、处置：粉色；
  丢弃、已删除：灰色；
  空闲：绿色
-->
<template>
  <div class="record-content" :class="bgClass">
    <div v-if="record.statusName != '租赁中'">{{ record.statusName }}</div>
    <template v-if="record.statusName != '丢失' && record.statusName != '未存在于门店'">
      <div v-if="record.statusName != '空闲'">
        {{
          (record.statusName == '处置' || record.statusName == '借出' || record.statusName == '已删除') && !record.amount
            ? ''
            : (record.amount || 0) + '元'
        }}
      </div>
      <div>
        {{
          (record.statusName == '处置' || record.statusName == '借出' || record.statusName == '已删除') && !record.rate
            ? ''
            : (record.rate || 0) + '%'
        }}
      </div>
    </template>
  </div>
</template>

<script setup>
  const props = defineProps({
    record: {
      type: Object,
      default() {
        return {}
      },
    },
  })

  // '租赁中' ? 'yellow' :  '丢弃' ? 'gray' :  '空闲' ? 'green' : 'pink'),

  let bgClass = 'record-content-type-'
  switch (props.record.statusName) {
    case '租赁中':
      bgClass += 'yellow'
      break
    case '丢弃':
    case '已删除':
      bgClass += 'gray'
      break
    case '空闲':
      bgClass += 'green'
      break
    case '处置':
      bgClass += 'pink'
      break
    case '借出':
      bgClass += 'pink'
      break
    case '未存在于门店':
      bgClass += 'purple'
      break
  }
</script>
<style lang="less" scoped>
  .record-content {
    width: 120px;
    height: 85px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
    padding: 10px 8px;
    margin: -9px -16px;
    line-height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .record-content-type-yellow {
    background: #ffead3;
  }
  .record-content-type-gray {
    background: #f2f2f3;
  }
  .record-content-type-green {
    background: #d8f3bd;
  }
  .record-content-type-pink {
    background: #fdedef;
  }
  .record-content-type-purple {
    background: #d3d9ff;
  }
</style>
